<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <link rel="stylesheet" href="css/rechargeProductDetail.css">
    <link rel="stylesheet" href="css/vant.css">
    <link rel="stylesheet" href="css/product.css">
    <title>商品分享</title>
    <style>
        .bottomBtnBox {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            bottom: 0rem;
            width: 10rem;
            height: 1.8667rem;
            z-index: 6;
        }

        .bottomBtnBox>div {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 8rem;
            height: 1.0667rem;
            font-size: .5333rem;
            font-weight: bold;
            color: #FBF0DA;
            border-radius: .9rem !important;
            background: linear-gradient(60deg, #FC8D2D, #FD4F06);
            -webkit-border-radius: .9rem !important;
            -moz-border-radius: .9rem !important;
            -ms-border-radius: .9rem !important;
            -o-border-radius: .9rem !important;
        }

        .shareBox {
            display: flex;
            align-items: center;
            position: absolute;
            right: 0px;
            top: 0px;
            font-size: .32rem;
            color: #999999;
            font-weight: 400;
        }

        .shareBox>img {
            margin-right: .1067rem;
            display: block;
            width: .32rem;
            height: .32rem;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="mask" v-if="mask">
            <img src="img/load.gif">
        </div>
        <!-- 轮播图 开始 -->
        <van-swipe class="my-swipe" autoplay="true" indicator-color="white">
            <van-swipe-item v-for="item in productLoopList">
                <img :src="path+'product/product_'+product_id+'/'+ item.proLoopPic" class="banner-image">
            </van-swipe-item>
            <template #indicator>
                <div class="custom-indicator">
                    {{ current + 1 }}/{{productLoopList.length}}
                </div>
            </template>
        </van-swipe>
        <!-- 轮播图 结束 -->
        <div class="newProInfo">
            <div class="proPriceBox">
                <div class="leftPrice">
                    <div>
                        <span>{{product.categroyId==-2?'充值':'价格'}}￥</span>
                        <span>{{formart.formartPrice}}</span>
                    </div>
                    <div>
                        <span>{{product.categroyId==-2?'可得￥':'每人限购'}}</span>
                        <span>{{formart.formatVipPrice}}{{product.categroyId==-3?'份':''}}</span>
                    </div>
                </div>
                <div class="rightTip">{{product.categroyId==-2?'储值金享福利':'特价限购商品'}}</div>
            </div>
            <div class="proInfo">
                <div>
                    <img src="img/rechargeDetail/rechargeTip.png" alt="" v-if="product.categroyId==-2">
                    {{formart.formartName}}
                    <img v-if="product.categroyId==-2" class="share" @click="toShare" src="img/rechargeDetail/share.png"
                        alt="">
                    <div v-if="product.categroyId==-3" class="shareBox" @click="toShare">
                        <img src="img/detail-share-icon.png" alt="">
                        分享
                    </div>
                </div>
                <div>
                    注：该商品属于虚拟产品，一经购买概不退款。
                </div>
                <div class="tipBox">
                    <div>
                        <span>{{product.categroyId==-2?'储值优惠':'超值优惠'}}</span>
                        <span class="icon"></span>
                        <span>限时活动</span>
                        <span class="icon"></span>
                        <span>大额优惠</span>
                    </div>
                    <div>
                        <span>{{product.categroyId==-2?'储值优惠':'限购优惠'}}</span>
                        <span></span>
                        <span>金额抵现</span>
                    </div>
                    <div>
                        <span>联手折扣</span>
                        <span>抢购</span>
                        <span>福利</span>
                    </div>
                </div>
            </div>
            <div class="forBox" style="margin-bottom: .2133rem;">
                <div>
                    <span>选择</span>
                    <div><img src="./img/rechargeDetail/rightIcon.png" alt="">
                        <template v-if="product.categroyId==-2">
                            充值{{formart.formartPrice}}可得{{formart.formatVipPrice}}
                        </template>
                        <template v-else>
                            每人限购{{formart.formatVipPrice}}份
                        </template>
                        <img src="./img/rechargeDetail/product-spec-icon.png">
                    </div>
                </div>
                <div>
                    <span>属性</span>
                    <div><img src="./img/rechargeDetail/rightIcon.png" alt="">
                        {{product.categroyId==-2?'储值金':'限购商品'}}
                        <img src="./img/rechargeDetail/product-spec-icon.png">
                    </div>
                </div>
            </div>
            <!-- 评价 开始 -->
            <div class="commentA">
                <div class="commentTitle">
                    <span>评价（{{commentNum}}）</span>
                </div>
                <div class="commentMain">
                    <div class="commentItem" v-for="item in userCommentList">
                        <div class="itemTitle">
                            <img class="userImg" :src='item.cityName' @error="loadimg">
                            <div class="userInfo">
                                <div>{{item.userName}}</div>
                                <div class="startImg">
                                    <img src="img/comment-icon1.png" alt="">
                                    <img src="img/comment-icon1.png" alt="">
                                    <img src="img/comment-icon1.png" alt="">
                                    <img src="img/comment-icon1.png" alt="">
                                    <img src="img/comment-icon1.png" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="commentCon" v-if="item.context == ''">
                            暂未做出评论
                        </div>
                        <div class="commentCon" v-else>
                            {{item.context}}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 评价 结束 -->

            <!-- 商品问答 开始 -->
            <div class="commentA">
                <div class="commentTitle">
                    <span>商品问答（{{answerNum}}）</span>
                </div>
                <div class="commentMain">
                    <div class="commentItem" v-for="item in answers">
                        <div class="commentCon1">
                            <div class="answerIcon">问</div> {{item.answerContent}}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 商品问答 结束 -->

            <div class="detail-box" ref="detail">
                <img :src="path+'product/product_'+product_id+'/'+item.picAddr" v-for="item in proPicList">
            </div>

            <div class="bottomBtnBox" @click="buyNow">
                <div>
                    立即购买
                </div>
            </div>
        </div>


        <div class="downBox" v-if="showPop" @click="showPop=false">
            <img src="./img/downTip.png" alt="">
        </div>
        <div class="downBox" v-if="sharePop" @click="sharePop=false">
            <img class="shareImg" src="./img/shareImg.png" alt="">
        </div>

    </div>

    <script src="js/vue.min.js"></script>
    <script src="js/mui.min.js"></script>
    <script src="js/flex_ible/lib-flexible.js"></script>
    <script src="js/vue-lazyload.js"></script>
    <script src="js/vant.min.js"></script>
    <script src="js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ajax.js"></script>
    <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        var ua = navigator.userAgent.toLowerCase();
        var isWeixin = ua.indexOf('micromessenger') != -1;
        var vm = new Vue({
            el: '#app',
            data: {
                product_id: sessionStorage.getItem('productId'),
                user_id: sessionStorage.getItem('userId'),
                shop_id: sessionStorage.getItem('shopId'),
                myShopId: sessionStorage.myShopId,
                // product_id: 2102,
                // user_id: 97740,
                // shop_id: 3494,
                // myShopId: 3494,

                product: '',
                productLoopList: {},
                formart: '',
                mask: true,
                current: 0,
                showPop: false,
                sharePop: false,
                proPicList: [],
                answers: [],
                answerNum: '',
                userCommentList: [],
                commentNum: '',

                zongShopId: '', // 总店id
                zongShop: '', //总店信息
                fenShop: '', //分店信息

                homeShopRatio: '',//总店返利比率
                boyShopRatio: '',//分店返利比率
                userRatio: '',//业务员返利比率
                shopUser: '',// 当前门店的业务员ID
                isFen: true,//是否为分店

                money: 800,// 预约支付金额

                myYuYueObj: '',
                oxId: 0,
                baojianShop: false,
                isHaveCopuon: false,// 是否有优惠券

                delMoney: 0,//抵扣金额
            },
            created() {
                if (!this.product_id) {
                    window.location.replace("./newDown.html")
                }
                this.getData()
                this.getData1()
                this.getShopType()
            },

            mounted() {
            },
            methods: {

                getShopType() {
                    var _this = this;
                    _this.isShow = true
                    ajax({
                        url: newUrl + 'care/getCareShopFlag',
                        type: 'post',
                        data: {
                            shopId: sessionStorage.shopId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res);
                            _this.isShow = false
                            if (res.flag) {
                                console.log(res);
                                if (res.data.homeShop == null && res.data.homeShopName == null && res.data.boyShop == null) {
                                    _this.baojianShop = false
                                } else {
                                    _this.baojianShop = true
                                    _this.getPerent()
                                }
                                console.log(_this.baojianShop);

                                if (res.data.homeShopName != null) {
                                    // 总店
                                    _this.isFen = false
                                    console.log('总店');
                                    _this.zongShopId = sessionStorage.shopId
                                    _this.zongShop = JSON.parse(sessionStorage.shop)
                                } else if (res.data.homeShop != null) {
                                    // 分店
                                    console.log('分店');
                                    _this.zongShopId = res.data.homeShop[0].shopId
                                    _this.zongShop = res.data.homeShop[0]
                                    _this.fenShop = JSON.parse(sessionStorage.shop)
                                }
                                console.log(_this.zongShopId);
                                console.log(_this.zongShop);
                                _this.getShopUser()
                            }

                        }
                    })
                },
                getPerent() {
                    var _this = this;
                    _this.isShow = true
                    ajax({
                        url: newUrl + 'care/getCareRule',
                        type: 'post',
                        data: {},
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res);
                            _this.isShow = false
                            if (res.flag) {
                                console.log(res);
                                res.data.forEach(item => {
                                    if (item.flag == 3) {
                                        _this.homeShopRatio = item.content
                                    } else if (item.flag == 2) {
                                        _this.boyShopRatio = item.content
                                    } else if (item.flag == 4) {
                                        _this.userRatio = item.content
                                    }
                                })
                            }
                        }
                    })
                },
                getShopUser() {
                    var _this = this;
                    _this.isShow = true
                    ajax({
                        url: newUrl + 'care/getCareShop',
                        type: 'post',
                        data: {},
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res);
                            _this.isShow = false
                            if (res.flag) {
                                console.log(res);
                                res.data.forEach(ele => {
                                    if (_this.isFen) {
                                        if (ele.boyShop == sessionStorage.shopId) {
                                            _this.shopUser = ele.userId
                                        }
                                    } else {
                                        if (ele.homeShop == sessionStorage.shopId) {
                                            _this.shopUser = ele.userId
                                        }
                                    }
                                });
                                console.log(_this.shopUser);

                            }
                        }
                    })
                },


                loadimg(e) {
                    var img = e.srcElement;
                    img.src = 'img/about.png'
                },
                getData: function () {
                    var that = this;
                    ajax({
                        type: "post",
                        url: newUrl + "product/getProduct",
                        data: {
                            product_id: that.product_id,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res)
                            if (res.flag) {
                                that.mask = false
                                var data = res.data
                                that.formart = data.formatList[0];
                                that.proPicList = data.proPicList.filter(item => {
                                    return item.picStatus == 1
                                });
                                that.product = data.product;
                                that.productLoopList = data.productLoopList.filter(item => {
                                    return item.proLoopStatus == 1
                                });
                                that.setTitle(that.product.productName)
                            }
                            console.log(that.formart)
                            console.log(that.product)
                        },
                    })
                },
                getData1: function () {
                    var that = this;
                    ajax({
                        type: "post",
                        url: newUrl + "product/vipDetail",
                        data: {
                            productId: that.product_id,
                            shopId: that.shop_id,
                            userId: that.user_id
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res)
                            if (res.flag) {
                                that.mask = false
                                var data = res.data
                                that.answers = data.answers;
                                that.answerNum = data.answerNum;
                                that.userCommentList = data.userCommentList;
                                that.commentNum = data.commentNum;
                            }
                        },
                    })
                },
                addOXHandle() {
                    var _this = this;
                    _this.homeShopRatio = _this.isFen ? _this.homeShopRatio : _this.homeShopRatio * 2
                    _this.userRatio = _this.isFen ? _this.userRatio : 0
                    ajax({
                        url: newUrl + 'care/addNotCareOrder',
                        type: 'post',
                        data: {
                            userId: sessionStorage.userId,
                            userName: JSON.parse(sessionStorage.user).userName,
                            userTel: '',
                            scheduledTime: '',
                            money: _this.order.totalMoney,
                            state: 1,
                            number: 1,
                            homeShop: _this.zongShopId,
                            homeShopName: _this.zongShop.shopName,
                            homeShopRatio: _this.homeShopRatio / 100,
                            boyShop: _this.isFen ? sessionStorage.shopId : -1,
                            boyShopName: _this.isFen ? _this.fenShop.shopName : '',
                            boyShopRatio: _this.boyShopRatio / 100,
                            shopUser: _this.shopUser,
                            userRatio: _this.userRatio / 100,
                            spare: _this.zongShopId,
                            yl: 0
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            if (res.flag) {
                                console.log(res);
                                // _this.userCode = res.data
                                // _this.isShow = false
                                // _this.successFlag = true;
                            } else {
                                // _this.$toast('预约失败，请重试')
                            }
                        },
                    })
                },
                toShare: function () {
                    var _this = this;
                    _this.mask = true
                    var title = _this.product.productName;
                    var dec = "这里有好商品，分享给你咯";
                    var url = location.href.split('#')[0];
                    ajax({
                        type: "post",
                        url: newUrl + "share/share",
                        data: {
                            url: url
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (data) {
                            var res = JSON.parse(data)
                            console.log(res)
                            var datas = res.data
                            _this.mask = false;
                            wx.config({
                                debug: false,
                                appId: datas.appId,
                                timestamp: datas.timestamp,
                                nonceStr: datas.nonceStr,
                                signature: datas.sign,
                                jsApiList: [
                                    'checkJsApi',
                                    'updateAppMessageShareData',
                                    'updateTimelineShareData',
                                    'onMenuShareTimeline',
                                    'onMenuShareAppMessage'
                                ]
                            });
                            wx.ready(function () { //需在用户可能点击分享按钮前就先调用
                                _this.sharePop = true;
                                var img = path + "product/product_" + _this.product_id + '/' + _this.product.productPic;
                                var link_rrl =
                                    "https://www.ccclkj.cn/sharepage/index.html?user_id=" +
                                    _this.user_id + "&id=" + _this.product_id + "&flag=19&shopId=" + sessionStorage.shopId
                                wx.updateAppMessageShareData({
                                    title: title, // 分享标题
                                    desc: dec, // 分享描述
                                    link: link_rrl, // 分享链接
                                    imgUrl: img, // 分享图标
                                    type: 'link', // 分享类型,music、video或link，不填默认为link
                                    success: function (res) {
                                        return false;
                                    }
                                })
                                wx.updateTimelineShareData({
                                    title: title, // 分享标题
                                    link: link_rrl, // 分享链接
                                    imgUrl: img, // 分享图标
                                    success: function () {
                                        //$("body").remove(".thisMask");
                                        return false;
                                    }
                                })
                            });
                            wx.error(function (res) {
                            })
                        }
                    })
                },
                setTitle(name) {
                    document.title = name
                    const i = document.createElement('iframe')
                    i.src = '/favicon.ico'
                    i.style.display = 'none'
                    i.onload = function () {
                        setTimeout(function () {
                            i.remove()
                        }, 9)
                    }
                    document.body.appendChild(i)

                },
                buyNow() {
                    if (this.myShopId == 0 || this.myShopId != this.shop_id) {
                        alert('该商品属于其他门店，暂不支持购买')
                    } else {
                        this.mask = true
                        var that = this;

                        if (this.product.categroyId == -2) {
                            ajax({
                                type: "post",
                                url: newUrl + "pay/wxRechargeProductPay",
                                data: {
                                    flag: 0,  // 微信支付 
                                    openId: sessionStorage.openId,
                                    shareId: sessionStorage.shareId,
                                    productId: that.product_id,
                                    shopId: sessionStorage.shopId,
                                    userId: sessionStorage.userId,
                                },
                                dataType: 'json',
                                timeout: 10000,
                                contentType: "application/json",
                                success: function (res) {
                                    console.log(res);
                                    var res = JSON.parse(res)
                                    if (res.flag) {
                                        that.mask = false
                                        console.log(res);
                                        onBridgeReady(res.data)
                                    }
                                }
                            })
                        } else {
                            ajax({
                                url: newUrl + 'pay/payWXLimitGoods',
                                type: 'POST',
                                data: {
                                    flag: 0,
                                    openId: sessionStorage.openId,
                                    shopId: sessionStorage.shopId,
                                    userId: sessionStorage.userId,
                                    productId: that.product_id,
                                    formatId: that.formart.formartId,
                                    limitNum: that.formart.formatVipPrice,
                                    price: that.formart.formartPrice,
                                    productName: that.product.productName,
                                    pic: that.product.productPic,
                                },
                                dataType: 'json',
                                timeout: 10000,
                                contentType: "application/json",
                                success: function (res) {
                                    console.log(res);
                                    var res = JSON.parse(res)
                                    if (res.flag) {
                                        if (res.data.flag == 'error') {
                                            alert(res.data.msg);
                                            that.mask = false
                                            return
                                        }
                                        that.mask = false
                                        console.log(res);
                                        onBridgeReady(res.data)
                                    }
                                }
                            })
                        }
                    }
                },
            }
        })
        function wxPayHandle() {
            // 检测支付环境中的 WeixinJSBridge
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady();
            }
        }

        function onBridgeReady(data) {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                "appId": data.appId, //公众号名称，由商户传入
                "timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
                "nonceStr": data.nonceStr, //随机串
                "package": data.package,
                "paySign": data.paySign, //微信签名
                "signType": data.signType //微信签名方式：
            },
                function (res) {
                    // 支付成功
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        alert('支付成功，请前往值班长App查看')
                        if (vm.product.categroyId != -2 && vm.baojianShop) {
                            vm.addOXHandle()
                        }
                    }
                    // 支付过程中用户取消
                    if (res.err_msg == "get_brand_wcpay_request:cancel") {
                        alert('已取消支付')
                    }
                    // 支付失败
                    if (res.err_msg == "get_brand_wcpay_request:fail") {
                        alert('支付失败')
                    }
                    if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {
                    }
                });
        }



    </script>

</body>

</html>